<!-- 模块说明 -->
<script setup lang='ts'>
// @ts-ignore
import { Product } from "../../api/index";
// @ts-ignore
import { ref, onMounted, watch } from "vue";
// @ts-ignore
import { useRoute, useRouter } from "vue-router";
// @ts-ignore
import { showToast } from "vant";
// @ts-ignore
import { useCustomersStore } from "./../../store"

const customerstore = useCustomersStore();
const route = useRoute();
const id = ref();
const count = ref();
const sessionUser = ref(); // 用户信息
const token = ref();
const router = useRouter();
const list = ref<any>();
const obj = ref({
  id: "",
  proname: "",
  img: "",
  price: "",
  username: "",
  count: "",
});
const onClickIcon = () => showToast("功能暂未开启");
const onClickIcon1 = () => {
  if (token.value) {
    router.push("/cart");
    console.log(token, "token");
  } else {
    showToast(
      "您还未登陆,无法进入到购物车页面，请先登录,3秒后自动跳转到登录页"
    );
    setTimeout(() => {
      
      router.push("/login");
    }, 3000);
  }
};
const updateCar = async (obj: any) => {
  let res = await Product["updateCar"](obj);
  showToast("商品数量+1");
  console.log(res, "更新购物车数据");
  // getList()
};
const carList = async (obj: any) => {
  //查找是否有这个用户的商品在购物车
  let res = await Product["select"](obj);
  console.log(res.data, "carList");
  console.log(obj, "最新obj");
  
  if (res.data.length == 0) {
    // console.log(obj, "bbbbbbbb");
    let res = await Product["add"](obj);
    console.log(obj);
    showToast("添加商品成功");
    console.log(res, "添加商品");
    console.log(1);
  } else {
    // console.log(1);
    const Xproduct1 = res.data.find(
      (item: any) => item.productname == obj.proname
    );
    console.log(Xproduct1, "namenamen");   //有obj
    if (Xproduct1) {
      // console.log(2);
      if (Xproduct1.productname == obj.proname) {
        // console.log(22);
        count.value = Xproduct1.productcount;
        id.value = Xproduct1.id;
        setTimeout(()=>{
          console.log(obj,"zuixin");
               updateCar(obj);
        },300)
       
      } else {
        console.log(23);
        let res = await Product["add"](obj);
        showToast("添加商品成功");
        console.log(res, "添加商品");
      }
    } 
    
    if(Xproduct1 == undefined){
      console.log(3);
      let res = await Product["add"](obj);
      console.log(obj);
      showToast("添加商品成功");
      console.log(res, "添加商品");
    }
  }
};

const onClickButton = async (obj: any) => {
  // console.log(obj,"ooooob");
  if (token.value) {
    carList(obj);
  } else {
    showToast("您还未登录，无法立即购买，请先登录，3秒后自动跳转到登录页");
    setTimeout(() => {
      router.push("/login");
    }, 3000);
  }
};

// if(list){

// }
const getList = async () => {
  // @ts-ignore
  let res = await Product["find"](route.params.id);
  console.log(res, "商品数据");
  console.log(route.params.id, "id");
  list.value = res.data[0];
  console.log(list.value, "list");

  //给obj赋值
  obj.value.proname = list.value.proname;
  obj.value.img = list.value.img;
  obj.value.price = list.value.price;
};
// @ts-ignore
watch(sessionUser, (newValue) => {
  if (newValue) {
    // 当sessionUser有值时，更新obj中的username字段
    obj.value.username = sessionUser.value;
  }
});
// @ts-ignore
watch(count, (newValue) => {
  if (newValue) {
    // 当sessionUser有值时，更新obj中的username字段
    obj.value.count = count.value;
    console.log(obj.value.count, "objjjkkkk");
  }
});
// @ts-ignore
watch(id, (newValue) => {
  if (newValue) {
    // 当sessionUser有值时，更新obj中的username字段
    obj.value.id = id.value;
    console.log(obj.value.id, "obj-----id");
  }
});
onMounted(() => {
  getList();
  console.log(route.params.id);
  // const dataFromSession = sessionStorage.getItem("username");
  // const dataToken = sessionStorage.getItem("token");
  const dataFromSession = customerstore.userid;
  const dataToken = customerstore.token;

  if (dataFromSession) {
    sessionUser.value = dataFromSession;
  }
  if (dataToken) {
    token.value = dataToken;
  }
  console.log(dataToken, "ssss");
  console.log(dataFromSession, "username");
  // console.log(list.id,list.proname,list.img,list.price,"obj");
});
</script>

<template>
  <div class="shop" v-if="list ? true : false">
    <div class="picture">
      <img
        :src="
          'http://182.92.162.156:8083/product/downpropic?filename=' + list.img
        "
        alt=""
      />
    </div>
    <div class="bottom">
      <p><span>商品名称：</span>{{ list.proname }}</p>
      <p><span>商品介绍：</span>{{ list.proinfo }}</p>
      <p>
        <span>商品价格：</span><i>￥{{ list.price }}</i>
      </p>
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-action-bar-icon
          icon="cart-o"
          text="购物车"
          @click="onClickIcon1"
        />
        <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-action-bar-button
          type="danger"
          text="立即购买"
          @click="onClickButton(obj)"
        />
      </van-action-bar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.shop {
  .picture {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .bottom {
    p {
      width: 100%;
      height: 50px;
      margin: 5px 0;
      font-size: 20px;
      line-height: 50px;
      i {
        color: red;
      }
      span {
        font-size: 24px;
        font-weight: 600;
      }
    }
  }
}
</style>
